<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>代理详情</title>
		<link rel="stylesheet" type="text/css" href="../../../bangnuo/admin/layui/css/layui.css">
		<script src="../../../bangnuo/admin/js/jquery-1.8.0.min.js"></script>
	</head>
	<body style="">
		<div>
			<!-- 名称 -->
			<div style="margin: 20px;">
				<p id="agentName" style="color: #007DDB; font-size: 20px; font-weight: bold;">公司名称</p>
			</div>
			<hr />
			<!-- 选项卡 -->
			<div>
				<div class="layui-tab">
					<ul class="layui-tab-title">
						<li class="layui-this">月佣金报表</li>
						<li>日佣金报表</li>
					</ul>
					<div class="layui-tab-content">
						<div class="layui-tab-item layui-show">
							<!-- 面板和搜索框 -->
							<div class="layui-card">
								<div class="layui-card-body">
									<form class="layui-form" action="">
										<div class="layui-form-item" style="margin: 10px;">
											<label class="layui-form-label">月份</label>
											<div class="layui-input-block" style="float: left;">
												<input type="text" name="startTime" id="startTime1" required lay-verify="required" placeholder="开始时间"
												 autocomplete="off" class="layui-input">
											</div>
											<div style="float: left; margin: 10px;">~</div>
											<div class="layui-input-block" style="float: left; margin-left: 0px;">
												<input type="text" name="endTime" id="endTime1" required lay-verify="required" placeholder="结束时间"
												 autocomplete="off" class="layui-input">
											</div>
											<div style="float: left; margin: 0px;">
												<div class="layui-form-item">
													<label class="layui-form-label">代理商</label>
													<div class="layui-input-block">
														<select name="agent" id="selectAgent" >
															<option value=""></option>
														</select>
													</div>
												</div>
											</div>
											<div style="float: left; margin: 0px;">
												<div class="layui-form-item">
													<div class="layui-input-block">
														<button class="layui-btn" lay-submit lay-filter="formDemo1">立即提交</button>
													</div>
												</div>
											</div>
										</div>
									</form>
								</div>
							</div>
							<hr />
							<!-- 表单 -->
							<table id="demo1" lay-filter="test1"></table>
							<hr />
							<div>
								<div style="float: left; margin: 10px;">
									<button class="layui-btn but1">有效汇总</button>
								</div>
								<div style="float: left; margin: 20px; display: none;" class="abc1">
									官方支付宝总计：<a>0</a>元；官方微信总计：<a>0</a>元；间联通道总计：<a>0</a>元；总共合计：<a>0</a>元
								</div>
							</div>
							<hr />
							<!-- 表单 -->
							<table id="demo2" lay-filter="test2"></table>
						</div>
						<div class="layui-tab-item">
							<!-- 面板和搜索框 -->
							<div class="layui-card">
								<div class="layui-card-body">
									<form class="layui-form" action="">
										<div class="layui-form-item" style="margin: 10px;">
											<label class="layui-form-label">月份</label>
											<div class="layui-input-block" style="float: left;">
												<input type="text" name="startTime" id="startTime2" required lay-verify="required" placeholder="开始时间"
												 autocomplete="off" class="layui-input">
											</div>
											<div style="float: left; margin: 10px;">~</div>
											<div class="layui-input-block" style="float: left; margin-left: 0px;">
												<input type="text" name="endTime" id="endTime2" required lay-verify="required" placeholder="结束时间"
												 autocomplete="off" class="layui-input">
											</div>
											<div style="float: left; margin: 0px;">
												<div class="layui-form-item">
													<label class="layui-form-label">代理商</label>
													<div class="layui-input-block">
														<select name="agentId" id="selectAgentDay" >
															<option value=""></option>
														</select>
													</div>
												</div>
											</div>
											<div style="float: left; margin: 0px;">
												<div class="layui-form-item">
													<div class="layui-input-block">
														<button class="layui-btn" lay-submit lay-filter="formDemo2">立即提交</button>
													</div>
												</div>
											</div>
										</div>
									</form>
								</div>
							</div>
							<hr />
							<!-- 表单 -->
							<table id="demo3" lay-filter="test3"></table>
							<hr />
							<div>
								<div style="float: left; margin: 10px;">
									<button class="layui-btn but2">有效汇总</button>
								</div>
								<div style="float: left; margin: 20px; display: none;" class="abc2">
									官方支付宝总计：<a>0</a>元；官方微信总计：<a>0</a>元；间联通道总计：<a>0</a>元；总共合计：<a>0</a>元
								</div>
							</div>
							<hr />
							<!-- 表单 -->
							<table id="demo4" lay-filter="test4"></table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../../../bangnuo/admin/layui/layui.js"></script>
	<script>
		$(document).ready(function(e) {
			$(".but1").click(function(e) {
				$(".abc1").toggle();
			});
		});
		$(document).ready(function(e) {
			$(".but2").click(function(e) {
				$(".abc2").toggle();
			});
		});
	</script>
	<script type="text/javascript">
        var startTime1 = "";
        var endTime1 = "";
        var startTime2 = "";
        var endTime2 = "";

        function getQueryVariable(variable){
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i=0;i<vars.length;i++) {
                var pair = vars[i].split("=");
                if(pair[0] == variable){return pair[1];}
            }
            return(false);
        }


		layui.use(['form', 'laydate', 'table','element'], function() {
			var form = layui.form,
				laydate = layui.laydate,
				table = layui.table
				element = layui.element;

			laydate.render({
				elem: '#startTime1', //指定元素
				type: 'month'
			});
			laydate.render({
				elem: '#endTime1', //指定元素
				type: 'month'
			});

			//监听提交
			form.on('submit(formDemo1)', function(data) {
			    console.log("endTime1:",data)
				layer.msg(JSON.stringify(data.field));
			    console.log("data.field:",data)
			    if(data.field.agent == null || data.field.agent=='' || data.field.agent == undefined){
                    data.field.agent = getQueryVariable("agentId");
				}
                table.reload('demo1', {
                    url: '/commission/countTimeScopeMonth'
                    ,where: {
                        "startTime": data.field.startTime,
                        "endTime": data.field.endTime,
                        "agentId":data.field.agent
					} //设定异步数据接口的额外参数
                    //,height: 300
                });
				return false;
			});

			//第一个实例
			table.render({
				elem: '#demo1',
				url: '/commission/countTimeScopeMonth', //数据接口
				page: true, //开启分页
				method: 'post',
				contentType: "application/json;charset=UTF-8",
				response: {
					"statusName": "code",
					"statusCode": 10000,
					"msgName": "message",
					"countName": "total",
					"dataName": "queryResult"
				},
                where: {
                    "startTime": getQueryVariable("time"),
                    "endTime": getQueryVariable("time"),
                    "agentId":getQueryVariable("agentId")
                },
				parseData: function(res) {
				    console.log("res",res);
				    startTime1 = $("#startTime1").val();
				    endTime1 = $("#endTime1").val();
				    if(startTime1 != undefined && startTime1 != '' && startTime1 != null){
                        res.object.time = startTime1+' 至 '+ endTime1;
					}else{
                        res.object.time = getQueryVariable("time")+' 至 '+ getQueryVariable("time");
                        startTime1 = getQueryVariable("time");
                        endTime1 = getQueryVariable("time");
					}

                    var queryResult = [];
                    queryResult[0] = res.object;
					return {
						"code": res.code,
						"message": res.message,
						"total": 1,
						"queryResult": queryResult
					};
				},
				request: {
					pageName: 'page', //页码的参数名称，默认：page
					limitName: 'size' //每页数据量的参数名，默认：limit
				},
				cols: [
					[ //表头
						{
							field: 'time',
							title: '日期',
							sort: true,
							fixed: 'left'
						}, {
							field: 'aliPay',
							title: '官方支付宝',
							sort: true
						}, {
							field: 'wxPay',
							title: '官方微信',
							sort: true
						}, {
							field: 'thirdParty',
							title: '间联通道',
							sort: true
						}, {
							field: 'sum',
							title: '合计',
							sort: true
						}, {
							field: '',
							title: '操作',
							templet: '#barDemo'
						}
					]
				]
			});
			//监听工具条 
			table.on('tool(test1)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
				var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

				if (layEvent === 'detail') { //查看
					//do somehing
					var index = layer.open({
						type: 2,
						area: ['600px', '600px'],
						title: '商户详情',
						content: 's-details.html?agentId='+getQueryVariable("agentId")+"&time="+endTime1
					});
					layer.full(index);
				}
			});
			//第一个实例
			table.render({
				elem: '#demo2',
				url: '/commission/findByAgentIdAndTimeMonth', //数据接口
				page: true, //开启分页
				method: 'post',
				contentType: "application/json;charset=UTF-8",
				response: {
					"statusName": "code",
					"statusCode": 10000,
					"msgName": "message",
					"countName": "total",
					"dataName": "queryResult"
				},
                where: {
                    "startTime": getQueryVariable("time"),
                    "endTime": getQueryVariable("time"),
                    "agentId":getQueryVariable("agentId")
                },
				parseData: function(res) {
					return {
						"code": res.code,
						"message": res.message,
						"total": res.queryResult.total,
						"queryResult": res.queryResult.list
					};
				},
				request: {
					pageName: 'page', //页码的参数名称，默认：page
					limitName: 'size' //每页数据量的参数名，默认：limit
				},
				cols: [
					[ //表头
						{
							field: 'monthDate',
							title: '日期',
							sort: true,
							fixed: 'left'
						}, {
							field: 'aliPay',
							title: '官方支付宝',
							sort: true
						}, {
							field: 'wxPay',
							title: '官方微信',
							sort: true
						}, {
							field: 'thirdParty',
							title: '间联通道',
							sort: true
						}, {
							field: 'sum',
							title: '合计',
							sort: true
						}, {
							field: '',
							title: '操作',
							templet: '#barDemo'
						}
					]
				]
			});
			//监听工具条

			table.on('tool(test2)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
				var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

				if (layEvent === 'detail') { //查看
					//do somehing
					var index = layer.open({
						type: 2,
						area: ['600px', '600px'],
						title: '商户详情',
						content: 's-details.html?agentId='+getQueryVariable("agentId")+'&time='+data.monthDate
					});
					layer.full(index);
				}
			});
		});
	</script>
	
	<script type="text/javascript">
		layui.use(['form', 'laydate', 'table','element'], function() {
			var form = layui.form,
				laydate = layui.laydate,
				table = layui.table
				element = layui.element;
	
			laydate.render({
				elem: '#startTime2', //指定元素
				type: 'datetime'
			});
			laydate.render({
				elem: '#endTime2', //指定元素
				type: 'datetime'
			});
	
			//监听提交
			form.on('submit(formDemo2)', function(data) {
                console.log("日:",data)
                layer.msg(JSON.stringify(data.field));
                console.log("data.field:",data)
                if(data.field.agentId == null || data.field.agentId=='' || data.field.agentId == undefined){
                    data.field.agentId = getQueryVariable("agentId");
                }
                table.reload('demo3', {
                    url: '/commission/countTimeScope'
                    ,where: {
                        "startTime": data.field.startTime,
                        "endTime": data.field.endTime,
                        "agentId":data.field.agentId
                    } //设定异步数据接口的额外参数
                    //,height: 300
                });
                return false;
			});
			//第一个实例
			table.render({
				elem: '#demo3',
				url: '/commission/countTimeScope', //数据接口
				page: true, //开启分页
				method: 'post',
				contentType: "application/json;charset=UTF-8",
				response: {
					"statusName": "code",
					"statusCode": 10000,
					"msgName": "message",
					"countName": "total",
					"dataName": "queryResult"
				},
                where: {
                    "startTime": getQueryVariable("time"),
                    "endTime": getQueryVariable("time"),
                    "agentId":getQueryVariable("agentId")
                },
				parseData: function(res) {
                    console.log("res",res);
                    startTime2 = $("#startTime2").val();
                    endTime2 = $("#endTime2").val();
                    if(startTime2 != undefined && startTime2 != '' && startTime2 != null){
                        startTime2 = startTime2.substr(0,11);
                        endTime2 = endTime2.substr(0,11);
                        res.object.time = startTime2+' 至 '+ endTime2;
                    }else{
                        res.object.time = getQueryVariable("time")+' 至 '+ getQueryVariable("time");
                        startTime2 = getQueryVariable("time");
                        endTime2 = getQueryVariable("time");
                    }

                    var queryResult = [];
                    queryResult[0] = res.object;
					return {
						"code": res.code,
						"message": res.message,
						"total": 1,
						"queryResult": queryResult
					};
				},
				request: {
					pageName: 'page', //页码的参数名称，默认：page
					limitName: 'size' //每页数据量的参数名，默认：limit
				},
				cols: [
					[ //表头
						{
							field: 'time',
							title: '日期',
							sort: true,
							fixed: 'left'
						}, {
							field: 'aliPay',
							title: '官方支付宝',
							sort: true
						}, {
							field: 'wxPay',
							title: '官方微信',
							sort: true
						}, {
							field: 'thirdParty',
							title: '间联通道',
							sort: true
						}, {
							field: 'sum',
							title: '合计',
							sort: true
						}, {
							field: '',
							title: '操作',
							templet: '#barDemo'
						}
					]
				]
			});
			//监听工具条
			//上部分商家明细
			table.on('tool(test3)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
				var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
	
				if (layEvent === 'detail') { //查看
					//do somehing
					var index = layer.open({
						type: 2,
						area: ['600px', '600px'],
						title: '商户详情',
						content: 's-details.html?agentId='+getQueryVariable("agentId")+"&time="+getQueryVariable("time")
					});
					layer.full(index);
				}
			});
			//第一个实例
			table.render({
				elem: '#demo4',
				url: '/commission/findByAgentIdAndTimeDay', //数据接口
				page: true, //开启分页
				method: 'post',
				contentType: "application/json;charset=UTF-8",
				response: {
					"statusName": "code",
					"statusCode": 10000,
					"msgName": "message",
					"countName": "total",
					"dataName": "queryResult"
				},
                where: {
                    "startTime": getQueryVariable("time"),
                    "endTime": getQueryVariable("time"),
                    "agentId":getQueryVariable("agentId")
                },
				parseData: function(res) {
					return {
						"code": res.code,
						"message": res.message,
						"total": res.queryResult.total,
						"queryResult": res.queryResult.list
					};
				},
				request: {
					pageName: 'page', //页码的参数名称，默认：page
					limitName: 'size' //每页数据量的参数名，默认：limit
				},
				cols: [
					[ //表头
						{
							field: 'monthDate',
							title: '日期',
							sort: true,
							fixed: 'left'
						}, {
							field: 'aliPay',
							title: '官方支付宝',
							sort: true
						}, {
							field: 'wxPay',
							title: '官方微信',
							sort: true
						}, {
							field: 'thirdParty',
							title: '间联通道',
							sort: true
						}, {
							field: 'sum',
							title: '合计',
							sort: true
						}, {
							field: '',
							title: '操作',
							templet: '#barDemo'
						}
					]
				]
			});
			//监听工具条 
			table.on('tool(test4)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
				var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
	
				if (layEvent === 'detail') { //查看
					//do somehing
					var index = layer.open({
						type: 2,
						area: ['600px', '600px'],
						title: '商户详情',
						content: 's-details.html?agentId='+data.agentId+"&time="+data.monthDate
					});
					layer.full(index);
				}
			});
		});
	</script>
	<script type="text/html" id="barDemo">
		<a class="layui-btn layui-btn-xs" lay-event="detail">查看商户明细</a>
	</script>

	<script>


        layui.use(['form', 'upload', 'layer'], function () {

            var form = layui.form;

            var resultData;

            //检查项目添加到下拉框中
            $.ajax({
                type: "GET",
                url: '/agentEntity/findByParentIdAndMySelf/'+getQueryVariable("agentId"),
                dataType:"json",
                success: function(res){
                    if(res.success){
                        var html = "<option value=\"\">请选择</option>";
                        for(var i=0;i<res.object.length;i++){
                            html = html+'<option value="'+res.object[i].id+'">'+res.object[i].name+'</option>'
                        }
                        $("#selectAgent").html(html);
                        $("#selectAgentDay").html(html);
                        form.render('select');
                    }

                }
            });
        });
	</script>
</html>
